<html ng-app="smogApp">
<head>
<title>Smog Sensor Measurements</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<!-- Twitter Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!--  JQuery UI for datepicker and slider -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/datetimepicker-master/jquery.datetimepicker.css"/>
<!-- AngularJS extension ng-table -->
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" 	rel="stylesheet" type="text/css">

</head>

<body ng-controller="Smog" id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
	
	<!-- Navigation -->
	<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-main-collapse">
					<i class="fa fa-bars"></i>
				</button>
				<a class="navbar-brand page-scroll" href="#page-top"> <i
					class="fa fa-cloud"></i> <span class="light">HTW</span> Smog Sensor
				</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div
				class="collapse navbar-collapse navbar-right navbar-main-collapse">
				<ul class="nav navbar-nav">
					<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
					<li class="hidden"><a href="#page-top"></a></li>
					<li><a class="page-scroll" href="#universities"><i
							class="fa fa-graduation-cap"></i>Universities</a></li>
					<li><a class="page-scroll" href="#project"><i
							class="fa fa-cog"></i>Project</a></li>
					<li><a class="page-scroll" href="#measurements"><i
							class="fa fa-bar-chart"></i>Measurements</a></li>
					<li><a class="page-scroll" href="#contact">Contact</a></li>
					<li><a class="page-scroll" href="map.html"><i
							class="fa fa-map-marker"></i>Map</a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container -->
	</nav>
	
	
	<!-- Intro Header -->
	<header class="intro">
		<div class="intro-body">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<h1 class="brand-heading">HTW Smog Sensor</h1>
						<p class="intro-text">
							A project in Cooperation between<br>HTW Saarland and Tongji-University
						</p>
						<a href="#universities" class="btn btn-circle page-scroll"> <i
							class="fa fa-angle-double-down animated"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
	</header>
	
	<!-- About Section -->
	<section id="universities"
		class="container content-section text-center">
		<h2>Universities</h2>
		<div class="row">
			<div class="col-sm-6 col-md-4 col-md-offset-2">
				<div class="thumbnail">
					<img src="img/tongji.png" class="img-thumbnail">
					<div class="caption">
						<h3>Tongji Universtity</h3>
						<p>Tongji University , colloquially known as Tongji , located
							in Shanghai, has more than 50,000 students and 8,000 staff
							members (as of 1 September 2007). It offers degree programs at
							both undergraduate and postgraduate levels. Established in 1907
							by the German government together with German physicians in
							Shanghai, Tongji is one of the oldest and most prestigious
							universities in China.</p>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<img src="img/htw.jpeg" class="img-thumbnail">
					<div class="caption">
						<h3>HTW Saar</h3>
						<p>Die Hochschule für Technik und Wirtschaft des Saarlandes
							(HTW) ist 1991 nach der Umbenennung der Fachhochschule des
							Saarlandes durch das Fachhochschulgesetz vom 15. Mai 1991
							entstanden. Zum April 2009 hat die HTW ihre Fachbereichs-Struktur
							auf eine Fakultäten-Struktur umgestellt. Aus früher sieben
							Fachbereichen plus einem in Gründung und zwei fachbereichslosen
							Studiengängen wurden vier Fakultäten.
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<section id="project" class="content-section text-center">
		<h2>Project Description</h2>
		<div class="project-section">
			<div class="row">
				<div class="container">
					<p>Mit dem Aufkommen von China als Forschungsstandort, entwickelt sich immer weiter der Gedanke mit China gemeinsame Entwicklungs- und Forschungsprojekte durchzuführen und China nicht mehr als einen reinen Fertigungsstandort zu betrachten. 
Diesen Weg der gemeinsamen Produktentwicklung will auch die HTW Saar in Kooperation mit der Tongji University in Shanghai gehen. Dazu werden vor allem die Projektarbeiten der Masterstudiengänge beider Hochschulen genutzt, um auch die Studenten der beiden Kulturen näher zu bringen und gemeinsame Projekte durchzuführen. Genau diese kulturellen Unterschiede stellen die Studenten beider Seiten vor große Probleme und Schwierigkeiten, die es zu lösen gilt.
					</p>
					<p>
					In diesem Jahr wurde als Projektthema die Erstellung eines Smogsensor-Netzwerks, zur zentralen Erfassung von vielfach lokal erfassten Smogwerten gewählt. 
Als Grundlage dient ein Smogsensor, der im Vorjahr ebenfalls von Studenten der HTW Saar und der Tongji University in Zusammenarbeit entwickelt wurde. Diesen Sensor gilt es nun noch weiter zu verbessern, sprich die Sensorsensitivität zu erhöhen und diese verbesserten Sensoren zur zentralen Datenerfassung zu vernetzen. Desweiteren sollen die Daten in einer Datenbank zentral erfasst werden und verschiedene Auswertungsmöglichkeiten zur Verfügung gestellt werden. Damit ist vor allem eine grafische Darstellung von Messwerten der verschiedenen Standorte von Wichtigkeit.
					</p>
				</div>
			</div>
		</div>
	</section>

    <section id="measurements" class="container content-section text-center">
		<div class="container">
	
			<h2>Measurement Results</h2>
	        <div class="row">
		       <div class="col-md-4 col-md-offset-4">
					<p>
						Search: <input type="text" class="form-control" ng-model="searchText">
					</p>
			   </div>
		    </div>
		    
			<div class="row">
					<form name="valueForm" class="form-group">
					  <div class="row"></div>
						<div class="col-md-3 col-md-offset-2">
							<p>
								Minimum value: <input type="number" class="form-control"
									name="minimumValue" ng-model="minValue" ng-init="minValue=0"
									min="0" max="1000" required>
							</p>
						</div>
						
						<div class="col-md-3 col-md-offset-2">
							<p>
								Maximum value: <input type="number" class="form-control"
									name="maximumValue" ng-model="maxValue" ng-init="maxValue=1000"
									min="0" max="1000" required>
							</p>
						</div>
						<span class="error" ng-show="valueForm.minimumValue.$error.required">Required!</span>
						<span class="error" ng-show="valueForm.minimumValue.$error.number">Not a valid number!</span>
						<span class="error" ng-show="valueForm.minimumValue.$error.min">No negative numbers!</span>
						<span class="error" ng-show="valueForm.minimumValue.$error.max">No numbers greater than 1000!</span>
						<span class="error" ng-show="valueForm.maximumValue.$error.required">Required!</span>
						<span class="error" ng-show="valueForm.maximumValue.$error.number">Not a valid number!</span>
						<span class="error" ng-show="valueForm.maximumValue.$error.min">No negative numbers!</span>
						<span class="error" ng-show="valueForm.maximumValue.$error.max">No numbers greater than 1000!</span>
					</div>
				</form>
			</div>
	
			<!-- slider does not work with ng-model -->
			<!-- 		<label for="minimum_value">Minimum value:</label> <input type="text" -->
			<!-- 			id="minimum_value" readonly="readonly" -->
			<!-- 			style="border: 0; color: #f6931f; font-weight: bold;" -->
			<!-- 			ng-model="minValue" ng-init="minValue=0"> -->
			<!-- 		<div id="slider_min"></div> -->
	
			<!-- 		<label for="maximum_value">Maximum value:</label> <input type="text" -->
			<!-- 			id="maximum_value" readonly="readonly" -->
			<!-- 			style="border: 0; color: #f6931f; font-weight: bold;" -->
			<!-- 			ng-model="maxValue" ng-init="maxValue=1000"> -->
			<!-- 		<div id="slider_max"></div> -->
	
			<br>
			<div class="row">
	
<!-- 				<p> -->
<!-- 					<input id="datetimepicker_start" type="text" ng-model="startDateTime" ng-init="-1970/01/02"> -->
<!-- 					<input id="datetimepicker_stop" type="text" ng-model="stopDateTime" ng-init="+1970/01/02"> -->
<!-- 				</p> -->
		
<!-- 				<br> -->
		
				<div class="dropdown">
					<p>Select Location:</p>
					<select class="btn btn-default dropdown-toggle"
						ng-model="selectedLocation">
						<option value="">all locations</option>
						<option ng-repeat="measurement in measurements | unique: 'location'">{{measurement.location}}</option>
					</select>
				</div>
		
				<br>
		
				<tbody>
					<div class="table-responsive">
		
						<p>
							<strong>Page:</strong> {{tableParams.page()}}
						</p>
						<p>
							<strong>Count per page:</strong> {{tableParams.count()}}
						</p>
		
						<table ng-table="tableParams"
							class="table table-bordered table-striped table-hover">
							<tr>
								<th><a href=""
									ng-click="predicate = 'sensorId'; reverse=!reverse">Sensor ID</a></th>
								<th><a href=""
									ng-click="predicate = 'location'; reverse=!reverse">Location</a></th>
								<th><a href=""
									ng-click="predicate = 'longitude'; reverse=!reverse">Longitude</a></th>
								<th><a href=""
									ng-click="predicate = 'latitude'; reverse=!reverse">Latitude</a></th>
								<th><a href=""
									ng-click="predicate = 'time'; reverse=!reverse">Time</a></th>
								<th><a href=""
									ng-click="predicate = 'value'; reverse=!reverse">Measurement Value</a></th>
								<th><a href=""
									ng-click="predicate = 'type'; reverse=!reverse">Measurement Unit</a></th>
							</tr>
							<tr
								ng-repeat="measurement in $data
																		| orderBy:predicate:reverse
																		| filter:searchText
																		| filter:selectedLocation																																													
																		"																					
								ng-if="measurement.value >= minValue && measurement.value < maxValue" class="info">
		
								<td><font color="black">{{measurement.sensorId}}</font></td>
								<td><font color="black">{{measurement.location}}</font></td>
								<td><font color="black">{{measurement.longitude}}</font></td>
								<td><font color="black">{{measurement.latitude}}</font></td>
								<td><font color="black">{{measurement.time | date:'yyyy-MM-dd HH:mm:ss Z'}}</font></td>
								<td><font color="black">{{measurement.value}}</font></td>
								<td><font color="black">{{measurement.type}}</font></td>
							</tr>
						</table>
					</div>
				</tbody>
			</div>
		</div>
	</section>
	
	<!-- Contact -->
	<section id="contact" class="map content-section text-center">
		<!-- class="map" -->
		<h2>Where can you find us?</h2>
		<iframe
			src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2605.138198108218!2d6.975891!3d49.23586900000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4795b3fd932b1c87%3A0xc8e7ee255653b26c!2sHochschule+f%C3%BCr+Technik+und+Wirtschaft+des+Saarlandes!5e0!3m2!1sde!2sde!4v1423504130234"
			width="100%" height="40%" frameborder="0" style="border: 0"></iframe>

	</section>
	
	<!-- Footer -->
	<footer>
		<div class="container text-center">
			<p>Copyright &copy; Smog Sensor Measurements HTW Saar</p>
		</div>
	</footer>

<!-- JQuery --> 
<script src="js/jquery.js"></script> 
<script src="js/jquery.easing.min.js"></script>
<script src="js/datetimepicker-master/jquery.datetimepicker.js"></script>
<!-- JQuery UI -->
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!-- Twitter Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<!-- AngularJS extension ng-table -->
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<!-- UI-Utils provide unique -->
<script src="js/ui-utils-0.2.1/ui-utils.min.js"></script>
<!-- own scripts -->
<script src="app/scripts.js" type="text/javascript"></script>
<script src="app/smog.js" type="text/javascript"></script>

</body>

</html>
